<template>
  <yd-layout class="m-search">
    <!-- 顶部导航 -->
    <yd-navbar slot="navbar" height=".88rem" bgcolor="#fff" color="#444" fontsize=".3rem">
      <yd-navbar-back-icon slot="left" color="#666" @click.native="$router.back()"></yd-navbar-back-icon>
      <!-- 搜索框 -->
      <form slot="center" class="m-srh-box" @submit.prevent="onSearch">
        <yd-cell-item>
          <yd-icon slot="left" name="search" size=".3rem" color="#999"></yd-icon>
          <yd-input slot="right" 
            v-model="searchWord" 
            :placeholder="'输入宝贝'" 
            :showErrorIcon="false"
            :showSuccessIcon="false"
            :showRequiredIcon="false">
          </yd-input>
        </yd-cell-item>
      </form>
      <button slot="right" class="srh-text" @click="onSearch">搜索</button>
    </yd-navbar>
    <!-- 搜索历史 -->
    <div class="m-srh-history">
      <div class="hd">
        <span>搜索历史</span>
        <span class="clear" @click="onClearHistory" v-show="searchHistory.length">清除</span>
      </div>
      <div class="bd">
        <button v-for="(history, index) in searchHistory" :key="index" @click="onSearch('history', history)">{{history}}</button>
      </div>
    </div>
  </yd-layout>
</template>

<script>
  import { storage } from 'util/storage'
  
  export default {
    data() {
      return {
        searchType: 'goods',
        searchWord: '',
        searchHistory: []
      }
    },
    created() {
      this.searchHistory = storage.get('searchHistory') || []
    },
    methods: {
      onSelectType(hash) {
        this.searchType = hash
      },
      onSearch(origin, history) {
        if (this.searchWord) {
          this.searchHistory.unshift(this.searchWord)
          storage.set('searchHistory', this.searchHistory)
        }
        if (origin == 'history') {
          this.searchWord = history
        }
        // this.$router.push(`/search/${this.searchType}?keyword=${encodeURIComponent(this.searchWord)}`)
        this.$router.push(`/search/goods?keyword=${encodeURIComponent(this.searchWord)}`)
      },
      onClearHistory() {
        this.searchHistory = []
        storage.set('searchHistory', [])
      }
    }
  }
</script>

<style lang="scss">
  @import '../../scss/_flex.scss';
  .m-search {
    .m-srh-box {
      border-radius: 0;
    }
    .tabs-container, .tabContent-wrap, .tabs-panel-content {
      height: 100%;
      background: #fff;
    }
    .srh-text {
      padding-right: .2rem;
      color: #666;
      font-size: .2rem;
    }
  }
  .m-srh-box {
    position: absolute;
    left: 1.2rem;
    right: 1.2rem;
    padding-left: 0;
    height: .5rem;
    border-radius: .5rem;
    background: #f4f4f4;
    .yd-cell-right {
      padding-left: .1rem;
      min-height: 0;
      input {
        height: .5rem;
      }
    }
    .yd-cell-right .yd-input-clear {
      height: auto;
    }
  }
  .m-search-index-tab-list {
    @include flex(around);
    padding: 0 .24rem;
    height: .88rem;
    background: #fff;
    text-align: center;
    button {
      position: relative;
      height: .88rem;
      border-bottom: 2px solid transparent;
      color: #666;
      &.active {
        color: #f00385;
        border-bottom-color: #f00385;
      }
    }
  }
  .m-srh-history {
    height: 100%;
    padding: 0 .3rem;
    background: #fff;
    .hd {
      display: flex;
      justify-content: space-between;
      line-height: .8rem;
      font-size: .26rem;
      color: #666;
      .clear {
        font-size: .2rem;
        color: #999;
      }
    }
    button {
      width: 1.4rem;
      height: .5rem;
      margin-right: .16rem;
      margin-bottom: .2rem;
      color: #666;
      background: #eaeaea;
      border: none;
    }
  }
</style>